<template>
    <div>
        <!-- 使用v-html指令将tabData渲染为HTML -->
        <div class="img" v-html="tabData"></div>
    </div>
</template>

<script setup lang="ts">
// 引入ref和nextTick函数
import { ref,nextTick } from 'vue'
// 引入useRoute函数
import { useRoute } from 'vue-router';
// 引入gettabbar函数
import { gettabbar } from '@/request/http'

// 获取当前路由对象
const route =useRoute();

// 获取路由参数中的id
const { id } =route.params;
console.log(id)

// 定义tabData变量，初始值为空数组
const tabData =ref<any>([]);

// 在组件挂载后执行
nextTick(()=>{
    // 调用gettabbar函数，传入id参数
    gettabbar(id as string).then((res) => {
        console.log(res.data)
        // 将返回的数据赋值给tabData
        tabData.value =res.data.content
        // console.log(tabData.value)
        // 在数据更新后执行
        nextTick(()=>{
            // 获取所有class为img的img元素
            const image =document.querySelectorAll('.img img');
            // 如果有图片元素
            if(image.length >0){
                // 遍历图片元素，设置最大宽度为100%，高度自适应
                image.forEach((image:any)=>{
                    image.style.maxWidth = '100%';
                    image.style.height = 'auto';
                })
            }else{
                // 如果没有图片元素，打印提示信息
                console.log('没有图片')
            }
        })
    }).catch((error)=>{
        // 如果获取图片失败，打印错误信息
        console.log('获取图片失败',error)
    })
})
</script>

<style scoped lang="scss">

</style>